<template>
	<div class="row-item">
		<div class="title">
			<span>缩略图</span>
		</div>
		<div class="img-layout">
			<el-tooltip
			        class="box-item"
			        effect="dark"
			        content="点击更换缩略."
				>
				<div class="ant-image" @click.stop="selectedIcon()" style="width: 40px;height: 40px;">
					<img class="imgS" :src="icon_url" />
				</div>
			</el-tooltip>
			
			<div class="img-info">
				<div>
					<span>缩略地址</span>
				</div>
				<div style="width: 100%;">
					<el-input v-model="input_model" placeholder="请输入内容" size="small"></el-input>
				</div>
			</div>
		</div>
		
		<div class="img-lib" v-if="openIconLibrary">
			<div class="head">
				<div>
					<span>图片库</span>
				</div>
				<div class="close" @click="handleCloseClick">
					<svg-icon icon-class="close" />
				</div>
			</div>
			<div class="body">
				<div class="style-search">
					<div  class="select">
						<el-tree-select clearable popper-class="catalogTree" v-model="classifyId" :data="options" :props="defaultProps" :check-strictly="true" :render-after-expand="false" @change="handleChange" />
					</div>
					<div class="input">
						<el-input
						  v-model="keywords"
						  placeholder="请输入关键字"
						  class="input-with-select"
						  :suffix-icon="Search"
						  @keydown="handleSearch"
						  style="margin-left: 4px;"
						>
						</el-input>
					</div>
				</div>
				
				<div class="style-content">
					<el-scrollbar height="100%" >
						<div class="style-row">
							<div class="item" v-for=" style in tableData">
									<el-tooltip
								        class="box-item"
								        effect="dark"
								        :content="style.name"
									>
									<div class="s-row-col"  @click="handleSelectedImg(style)">
										<div class="img-pane">
											<img class="imgS" :src="style.url" />
										</div>
									</div>
								</el-tooltip>
							</div>
						</div>
					</el-scrollbar>
				</div>
				<div class="style-pagination">
					<el-pagination size="small" background layout="prev, pager, next" :page-size="_pageSize" :total="_total" @current-change="currentChange" />
				</div>
			</div>
		</div>
	</div>
</template>


<script lang="ts" setup>
	
	import {
	  getAssetClassifyOptions,getAssetPage
	} from "@/api/wdp/asset";
	
	import {
	  Search
	} from '@element-plus/icons-vue'
	
	const props = defineProps({
		baseUrl: {
			type: String,
			default: () => ''
		},
		identifier: {
			type: String,
			default: () => {}
		},
		value: {
			type: String,
			default: () => {}
		},
	})
	
	const defaultProps = {
	  children: 'children',
	  label: 'name',
	  value:'id'
	}
	
	const loading=ref<boolean>(false);
	const keywords = ref('');
	const options = ref<any[]>();
	const classifyId=ref('');
	let tableData=ref<any[]>([])
	const baseUrl = ref<string>('');
	const _cur=ref(1);
	const _total=ref(0);
	const _totalPage=ref(0);
	const _pageSize=ref(20);
	
	
	const openIconLibrary=ref<boolean>(false);
	const input_model=ref<string>("");
	const emits = defineEmits(['onchange'])
	const icon_url=ref();
	watch(props,() => {
			baseUrl.value=props.baseUrl;
			input_model.value=props.value;
			if(input_model.value){
				if(input_model.value.indexOf("http") == -1 && input_model.value.indexOf("https") == -1 && input_model.value.indexOf("HTTP") == -1 && input_model.value.indexOf("HTTPS") == -1){
					icon_url.value=baseUrl.value+'/file/thumbnail/'+input_model.value+"?"+ new Date().getTime()
				}else{
					icon_url.value=input_model.value
				}
			}else{
				icon_url.value=ref(new URL(`../../assets/images/icon-img.png`, import.meta.url).href).value
			}
		},
	    { immediate: true, deep: true },
	)
	
	const validate=()=>{
	}
	
	const selectedIcon=()=>{
		loadOptions();
		load();
		openIconLibrary.value=!openIconLibrary.value
	}
	
	const handleSelectedImg=(data:{id:string,width:number,height:number,type:string})=>{
		input_model.value=data.id;
		icon_url.value=baseUrl.value+'/file/thumbnail/'+data.id+"?"+ new Date().getTime();
		validate();
		emits('onchange',{
			identifier:props.identifier,
			value:input_model.value
		})
	}
	
	const handleCloseClick=()=>{
		openIconLibrary.value=!openIconLibrary.value
	}
	
	async function loadOptions() {
	  getAssetClassifyOptions({type:'icon'}).then((response) => {
	    options.value = recurOptions(response.data);
	  });
	}
	
	function recurOptions(list:any) {
	  function buildTree(node:any) {
	    let children = []
	    for (let item of list) {
	      if (item.parentId === node.id) {
	        children.push(buildTree(item))
	      }
	    }
	    if (children.length > 0) {
	      node.children = children
	    }
	    return node
	  }
	  let res = []
	  for (let item of list) {
	    if (item.parentId === '-1') {
	      res.push(buildTree(item))
	    }
	  }
	  return res
	}
	
	const currentChange=(cur:number)=>{
		_cur.value= cur
		load();
	}
	
	const handleChange=(id:any)=>{
		classifyId.value=id;
		load();
	}
	
	const handleSearch=(e:any)=>{
		if(e.keyCode == 13) {
			load();
		}
	}
	
	const load=()=>{
		loading.value=true;
		getAssetPage({
			keywords:keywords.value,
			classifyId:classifyId.value=='-1'?'':classifyId.value,
			type:'icon',
			cur:_cur.value,
			limit:_pageSize.value
		})
		.then((res:any) => {
			const _data=res?.data
			_data.list.forEach((item:any) => {
			  if(item.thumbnail){
			  	item['url']=import.meta.env.VITE_APP_BASE_API+'/file/thumbnail/'+item?.id+"?"+ new Date().getTime()
			  }else{
			  	item['url']=ref(new URL(`../../assets/images/default_case.png`, import.meta.url).href)
			  }
			})
			_total.value=_data.totalRow
			_totalPage.value=_data.totalPage
			tableData.value= _data.list
		})
		.catch((e:any) => {
			console.error(e)
		})
		.finally(() => {
			loading.value=false;
		});
	}
	
	onMounted(() => {
		input_model.value=props.value
	});
</script>


<style scoped>
	.img-lib{
		position: fixed;
		min-width: 310px;
		width: 310px;
		max-height: calc(100vh - 76px);
		max-width: calc(100vw - 50% - 200px);
		background: #232323;
		border-radius: 16px;
		right: 312px;
		top: 63px;
		pointer-events: auto;
		color: #d5d5d5;
		font-size: 12px;
		height: calc(100vh - 160px);
		z-index: 9999;
		>.head{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 36px;
			border-radius: 16px 16px 0px 0px;
			padding: 0px 8px 0px 8px;
			>.close{
				cursor: pointer;
				>.svg-icon {
				    font-size: 20px;
				}
			}
		}
		>.body{
			padding: 0px;
			overflow: hidden;
			height: calc(100% - 40px);
			>.style-search{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-direction: row;
				flex-wrap: nowrap;
				padding: 6px 8px 3px 8px;
				border-top: 1px solid #333333;
				.select{
					flex: 0.5;
				}
				.input{
					flex: 0.5;
				}
			}
			
			>.style-content{
				height: calc(100% - 80px);margin-top: 3px;
				border-top: 1px solid #333333;
				border-bottom: 1px solid #333333;
				.style-row{
					margin-top: 10px;
					display: flex;
					flex-wrap: wrap;
					>.item{
						margin: 0px 0px 5px 10px;
						>.s-row-col{
							display:inline-block;
							width: 90px;
							height: 90px;
							border-radius: 5px;
							padding: 0px;
							background: #33333380;
							cursor: pointer;
							>.img-pane{
								position: relative;
								display: inline-block;
								transition: opacity .3s;
								width: 90px;
								height: 90px;
								>.imgS{
								    object-fit: contain;
								    width: 100%;
								    height: 100%;
									border-radius: 5px;
								}
								:hover{
									background-color: #6C5DD3;
								}
							}
							>.namePlat {
								>.namePlatName{
								    width: 100%;
								    padding-top: 4px;
								    height: 22px;
								    display: flex;
								    flex-direction: column;
								    flex-wrap: nowrap;
								    justify-content: center;
								    align-items: center;
								    background: #6C5DD3;
								    color: #fff;
								    font-size: 12px;
								}
							}
						}
					}
				}
			}
		}
	}
	

	
	
	.style-pagination{
		margin-top: 8px;
		padding: 0px 12px 0px 12px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
</style>